<template>
  <div class="video-container">
    <el-form ref="form" class="time-range-form" :model="form" label-width="80px">
      <el-form-item label="时间范围">
        <el-col :span="11">
          <el-date-picker v-model="form.date1" type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-time-picker v-model="form.date2" placeholder="选择时间" style="width: 100%;"></el-time-picker>
        </el-col>
      </el-form-item>

    </el-form>
    <video ref="video" class="video" autoplay muted></video>
  </div>
</template>
<script>
import {VideoFlv} from "@haiking/haiking-jstool";
export default {
  name: "VideoHistory",
  data() {
    return {
      videoFlv: undefined,
      form: {

        date1: '',
        date2: '',

      }
    }
  },
  mounted() {
    this.initVideo();
  },
  methods: {
    initVideo() {
      const videoElement = this.$refs.video;
      this.videoFlv = new VideoFlv(
        {
          type: "flv",
          isLive: true, // 是否是直播流
          url: "http://192.168.3.195/live?port=1935&app=live&stream=history", // 拉流示例地址，stream参数一定要和推流时所设置的流密钥一致，app是推流的uri
          // url: "http://192.168.1.221/live?port=1935&app=live&stream=room",
        },
        {
          videoElement: videoElement,
          enableWorker: false, // 启用分离的线程进行转换
          enableStashBuffer: false, // 关闭IO隐藏缓冲区
          // stashInitialSize: 128, // 减少首帧显示等待时长
          // headers: {
          //   Authorization: "",
          // },
        }
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.video-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .video {
    flex: 1;
  }
  .time-range-form{
    width:600px;
    .line{
      text-align: center;
    }
  }
}
</style>
